<template>
  <div>
    <el-row :gutter="20" style="padding-top: 20px">
        <el-col :span="12" :offset="0">
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-avatar
                style="margin-left: 200px"
                :size="100"
                :src="`https://localhost:62593/image/OIP-C.jpg`"
                class="block"
              />
            </el-col>
            <el-col :span="12" :offset="0">
              <span>
                {{ form.venDorCode }}
                <br />
                <el-divider direction="vertical" />
                {{ form.createTime }}
              </span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-tag
            :key="form.venDorCode"
            :type="primary"
            effect="dark"
            round
          >
            编号：{{ form.venDorCode }}
          </el-tag>
        </el-col>
      </el-row>
       <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <el-card style="max-width: 100%">
            <div style="padding-left: 1000px">
              <el-button type="info" text>
                <el-icon color="#f90" style="margin-right: 5px">
                  <Share />
                </el-icon>
                关联账户
              </el-button>
              <el-button type="info" text @click="updateSupplier">
                <el-icon color="#f90" style="margin-right: 5px">
                  <Edit />
                </el-icon>
                编辑
              </el-button>
            </div>

            <el-divider content-position="left"
              ><span style="font-size: 20px">供应商信息</span></el-divider
            >
            <table :ref="options" style="margin: 0 auto">
              <tr>
                <td class="hint">供应商名称：</td>
                <td class="input">{{ form.vendorName }}</td>
                <td class="hint">供应商类型：</td>
                <td class="input">
                  {{ form.vendorType ? "个人" : "企业" }}
                </td>
              </tr>
              <tr>
                <td class="hint">助记码：</td>
                <td class="input">{{ form.mnemonics }}</td>
                <td class="hint">使用状态：</td>
                <td class="input">
                  {{ form.useState == false ? "停用" : "启用" }}
                </td>
              </tr>
              <tr>
                <td class="hint">负责人姓名：</td>
                <td class="input">{{ form.responsibleName }}</td>
                <td class="hint">电话：</td>
                <td class="input">{{ form.responsiblePhone }}</td>
              </tr>
              <tr>
                <td class="hint">所在地：</td>
                <td class="input">{{ form.arearAdd }}</td>
                <td class="hint">统一社会信用代码（税号）：</td>
                <td class="input">
                  {{ form.unifiedSocialCreditCode }}
                </td>
              </tr>
              <tr>
                <td class="hint">所属行业：</td>
                <td class="input">{{ form.industryName }}</td>
                <td class="hint">备注：</td>
                <td class="input" v-html="form.vendorDesc"></td>
              </tr>
            </table>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="银行账户" name="second">银行账户</el-tab-pane>
        <el-tab-pane label="服务人员" name="third">服务人员</el-tab-pane>
        <el-tab-pane label="供应商联系" name="fourth">供应商联系</el-tab-pane>
        <el-tab-pane label="商品采购价格" name="fifth"
          >商品采购价格</el-tab-pane
        >
        <el-tab-pane label="上传附件" name="sixth">上传附件</el-tab-pane>
      </el-tabs>
       <!-- 弹框显示 -->
      <el-dialog
        destroy-on-close
        v-model="dialogVisible"
        title="供应商修改"
        width="600"
      >
        <UpdateSupplier ref="exposeUpdateSupplier" @add-o-k="addOK" />
        <template #footer>
        </template>
      </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { reactive,ref,onMounted } from 'vue'
import purcure from '@/api/PurchaseMent/index'
import { purcoreQuery,buildingIdQuery } from '@/api/PurchaseMent/model'
import vendor from '@/api/VendorMangMent/index'
import { vendorQuery } from '@/api/VendorMangMent/model'
import { ElMessage, ElMessageBox } from 'element-plus'
import { defineComponent, onUnmounted } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { fromJSON } from 'postcss';
import UpdateSupplier from "./updateSupplier.vue";
const router = useRouter()
const route = useRoute()
const form = reactive({
  "vendorSnowId":"",
    "venDorCode": "",
    "vendorType": "",
    "responsiblePhone": "",
    "responsibleName": "",
    "vendorName": "",
    "identityCard": "",
    "arearAdd": "",
    "industryName": "",
    "unifiedSocialCreditCode": "",
    "mnemonics": "",
    "vendorAttributes": "",
    "businessId": 1,
    "useState": true,
    "unitsOfReference": "",
    "vendorDesc": "",
    "markets": "",
    "salesman": "",
    "createBy": 1,
    "createTime": "",
    "updateBy": 1,
    "updateTime": "",
    "isDel": false
})
const vendorSnowId= 
onMounted(() => {
  view();
})
const activeName = ref("first");
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
//查看
const view = () => {
    vendor.editvendor(route.query.vendorSnowId).then(res=>{
        form.arearAdd = res.data.arearAdd
        form.businessId = res.data.businessId
        form.createBy = res.data.createBy
        form.createTime = res.data.createTime
        form.identityCard = res.data.identityCard
        form.industryName = res.data.industryName
        form.isDel = res.data.isDel
        form.mnemonics = res.data.mnemonics
        form.markets = res.data.markets
       form.responsibleName = res.data.responsibleName
       form.salesman = res.data.salesman
       form.updateBy = res.data.updateBy
       form.updateTime = res.data.updateTime
       form.vendorDesc = res.data.vendorDesc
       form.vendorName = res.data.vendorName
       form.vendorType = res.data.vendorType
       form.venDorCode = res.data.venDorCode
      form.responsiblePhone = res.data.responsiblePhone
       form.unitsOfReference= res.data.unitsOfReference
      form.useState = res.data.useState
      form.vendorAttributes = res.data.vendorAttributes
      form.unifiedSocialCreditCode = res.data.unifiedSocialCreditCode
      form.vendorSnowId = res.data.vendorSnowId
       console.log(form)
    })
}
onMounted(()=>{
    view()
})
const dialogVisible = ref(false);
const exposeUpdateSupplier = ref(null);
//刷新页面
const addOK = () => {
  dialogVisible.value = false;
  view();
};
//更新供应商（打开弹窗）
const updateSupplier = () => {
  dialogVisible.value = true;

};
</script>
<style>
.block {
  flex: 10;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

table tr td {
  font-size: 14px;
}

table tr {
  height: 40px;
}

.hint {
  color: grey;
}

.input {
  color: black;
  padding-right: 200px;
}
</style>